<template>
	<view>
		<st-mc-framework :navTitle="ModuleTitle" @changeLevel="changeLevel"
			@AddModuleData_select='AddModuleData_select'>
			<template #workbench>
				<m-drag-button :style="{ opacity: BtnShow ? 1 : 0 }" :isDock="true" :existTabBar="true"
					class="m-drag-button-view" :initialBottom="60">
					<template #BtnContent>
						<u-icon name="search" color="#fff" size="25px" @click="search"></u-icon>
					</template>
				</m-drag-button>
			</template>
			<!-- 主内容 -->
			<template #content>

				<view class="content_box f-dc">
					<view class="table table_top_th">
						<table>
							<tr>
								<th width='25%'>人员名称</th>
								<th width='25%'>上班打卡时间</th>
								<th width='25%'>下班打卡时间</th>
								<th width='25%'>班次</th>
							</tr>
						</table>
					</view>
					<z-paging ref="paging" v-model="contents" @query="queryList" :fixed="false" class="z_paging">
						<view class="table">
							<table style="table-layout: fixed;">
								<tbody>
									<tr v-for="(item,index) in contents">
										<td width='25%'>{{item.EmplName}}</td>
										<td width='25%'>{{item.ClockIn}}</td>
										<td width='25%'>{{item.ClockOut}}</td>
										<td width='25%'>{{item.ShiftName}}</td>
									</tr>
								</tbody>
							</table>
						</view>
					</z-paging>
				</view>

			</template>
		</st-mc-framework>

		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0"
			@change="changePopup">
			<view class="popup_content">
				<u-cell-group :border='false'>
					<u-cell title="开始时间" :isLink="false" :value='FormData.FBDate' @click="addTime('开始')"></u-cell>
					<u-cell title="结束时间" :isLink="false" :value='FormData.FEDate' @click="addTime('结束')"></u-cell>
				</u-cell-group>
				<view class="bottomBtns">
					<button block @click="submit">
						查 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 询
					</button>
				</view>

			</view>
		</uni-popup>
		<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false'
			@confirm='pickerConfirm'></u-datetime-picker>
		<m-loading :text="loadingName" v-model="showMLoading" :showClose="false"
			maskBackgroundColor="rgba(0,0,0,0.3)"></m-loading>

	</view>
</template>

<script>
	import {
		getTimeStamp,
		getFormatDateTime,
		getBefore7DateTime,
		formatDateTime,
		navigateMixin,
		baseAddModuleData_select,
		getchangeLevel
	} from '@/st_mes_zs/common/base.js';

	export default {
		mixins: [navigateMixin, baseAddModuleData_select],
		data() {
			return {
				ModuleTitle: '',
				showMLoading: false,
				loadingName: '正在加载中……',
				contents: [],
				FormData: {
					EquipmentID: 0,
					EquipmentName: "",
					PageIndex: 1,
					PageSize: 30,
					FBDate: '',
					FEDate: '',
					EmplID: ''
				},
				show: false,
				value1: Number(new Date()),
				TimeName: '',
				disabled: false,
				BtnShow: false, //按钮显示
			};
		},


		onReady() {
			var that = this
			uni.hideLoading();
			that.showMLoading = true
			const {
				appConfigInfo
			} = that.$store.state;
			that.ModuleTitle = appConfigInfo.ActiveModule.ModuleName

			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			})
		},
		onLoad(options) {
			var that = this
			that.$safeStatus({
				payload: '其他', // 要传递的数据
			});
			const {
				GuyueModule,
				UserInfo,
				appConfigInfo
			} = that.$store.state;
			const {
				MesBasicInfo
			} = GuyueModule;
			const formDefaults = {
				EquipmentID: MesBasicInfo.warehouse.EquipmentID,
				EquipmentName: MesBasicInfo.warehouse.EquipmentName,
				FBDate: getBefore7DateTime(),
				FEDate: getFormatDateTime(new Date()),
				EmplID: UserInfo.EmplID,
			};
			that.assignFormData(that.FormData, formDefaults);
		},
		methods: {
			// 创建表单赋值工具函数
			assignFormData(target, defaults = {}) {
				var that = this;
				Object.keys(defaults).forEach(key => {
					target[key] = defaults[key];
				});
				that.$forceUpdate();
			},

			async AddModuleData_select(res) {
				try {
					const backDelta = await this.GetModuleData_select(res);
				} catch (error) {
					console.error('返回操作失败:');
				}
			},
			addTime(name) {
				this.TimeName = name
				if (this.TimeName == '开始') {
					this.value1 = Number(getTimeStamp(this.FormData.FBDate))
				} else {
					this.value1 = Number(getTimeStamp(this.FormData.FEDate))
				}
				this.show = true
			},

			pickerConfirm(e) {
				let that = this;
				var time = getFormatDateTime(e.value)
				var formDefaults = {}
				if (this.TimeName == '开始') {
					this.FormData.FBDate = time
					formDefaults = {
						FBDate: time
					}
				} else {
					formDefaults = {
						FEDate: time
					}
				}
				that.assignFormData(that.FormData, formDefaults);
				this.show = false
			},
			search() {
				this.$refs.popup.open('bottom')
			},


			changePopup() {

			},
			submit() {
				this.$refs.popup.close('bottom')
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();
			},
			queryList(pageNo) {
				let that = this;
				try {
					that.FormData.PageIndex = pageNo
					that.Request.request('getClockRecords', this.FormData, (ret) => {
						if (ret.status == 200) {
							that.showMLoading = false
							ret.data.ds.map((item) => {
								item.ClockIn = formatDateTime(item.ClockIn)
								item.ClockOut = formatDateTime(item.ClockOut)
							})
							that.$refs.paging.complete(ret.data.ds);
						} else {
							that.showMLoading = false
						}
					})
				} catch (e) {
					that.showMLoading = false
					console.log(e)
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}

			},

			changeLevel(list, data, row) {
				getchangeLevel(data)

			},


		}
	}
</script>

<style lang="scss" >
	@import "../css/index.css";
</style>